<!DOCTYPE html>
<html>
  <head>
    <title>客服A</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   
    <script type="text/javascript" src="resources/js/jquery-3.2.1.min.js"></script>

    <style>
    .div1{
    	border:1px solid gray;
    }
    .center{
    	text-align:center;
    	margin-bottom:10px;
    }
    .message_content{
    	border:1px solid blue;
    	height:300px;
    	width:800px;
    	overflow-y:scroll;
    	margin-left:200px;
    	margin-bottom:10px;
    }
    .div_left{
    	clear:both;
    	float:left;
    	margin:5px
    }
    .div_right{
    	clear:both;
    	float:right;
    	margin:5px
    }
    </style>
    
    <script>
		var str1="<div class='div_left'>";
		var str2="<span class='left_name'>";
		var str3="</span>";
		var str4="<span class='left_msg'>";
		var str5="</div>";
		
		var str11="<div class='div_right'>";
		var str22="<span class='right_name'>";
		var str33="<span class='right_msg'>";
		
    	$(function(){
    		$("input[name=btn1]").click(function(){
    			sendMsg("");//发送回复用户的消息记录
    		});
    	});
    	//绑定要服务的用户
    	function bindUser(object){
    		var user_name2 = $("#user_name").val();//获取用户名
    		if(user_name2!=""){
    			alert("本对话已绑定用户，若想切换用户，请刷新");
    			return;
    		}
    		//获取要绑定的用户
    		var user_name = $(object).val();
    		//获取服务的客户号
    		var opper_name = $("#opper_name").text();
    		
    		$.ajax({
				type:"post",
				url:"messageServlet.do",
				data:{
					flag:"bindUser",
					user_name:user_name,
					opper_name:opper_name
				},
				dataType:"text",
				success:function(data){
					if(data == "true"){
						$("#user_name").val(user_name);
						sendMsg("您好，我是客户小A，请问有什么可以帮到您！");
						//定时刷新
			    		setInterval(startReq,1000);
					} else{
						alert("改用户暂无问题咨询！");
					}
				}
			});
    	}
    	//客服发送回复消息
    	function sendMsg(msg){
    		var user_name = $("#user_name").val();
    		if(user_name == ""){
    			alert("用户不能为空");
    			return;
    		}
			var opper_name = $("#opper_name").text();
			var user_msg = $("input[name=msg]").val();
			if(msg != ""){
				user_msg = msg;
			}
			
			var end = str1+str2+opper_name+":"+str3+str4+user_msg+str3+str5;

			$(".message_content").append(end);//把回复消息嵌入对话狂
			$("input[name=msg]").val("");
    		$.ajax({
				type:"post",
				url:"messageServlet.do",
				data:{
					flag:"insertService",
					user_name:user_name,
					opper_name:opper_name,
					user_msg:user_msg
				},
				dataType:"json",
				success:function(data){
					
				}
			});
    	}
    	
    	//获取绑定后用户的咨询问题
    	function startReq(){
    		var user_name = $("#user_name").val();//用户名
    		var opper_name = $("#opper_name").text();//客户名
    		$.ajax({
				type:"post",
				url:"messageServlet.do",
				data:{
					flag:"serviceReqMsg",
					user_name:user_name,
					opper_name:opper_name
				},
				dataType:"json",
				success:function(data){
					for(var i=0;i<data.length;i++){
						var end = str11+str22+data[i].message_info+str3+str33+":"+data[i].user_name+str3+str5;
		    			$(".message_content").append(end);
					}
					
				}
			});
    	}
    	
    	
    	
    	
    </script>
     
  </head>
  
  <body>
       <div>
       		<input  type="button" onclick="bindUser(this)" value="用户A" />
       		<input  type="button" onclick="bindUser(this)" value="用户B" />
       
       </div>
       <div class="div1">
            <div>
	       		<span id="opper_name">客服小A</span>
	       		<input type="hidden" id="user_name"/>
	       </div>
       		<div class="center message_content">
<!--        			<div class="div_left"> -->
<!--        			<span class="left_name">客服小A：</span> -->
<!--        			<span class="left_msg">您好！</span> -->
<!--        			</div> -->
<!--        			<div class="div_right"> -->
<!--        			<span class="right_msg">您好</span> -->
<!--        			<span class="right_name">：用户A</span> -->
<!--        			</div> -->
       		</div>
            <div class="center">
            	<span>请输入回复内容:</span>
                <input name="msg" type="text" style="width:450px" />
            	<input name="btn1" type="button" value="提交" />
            	<input type="reset" value="重置" />
            </div>
       
       </div>
  </body>
</html>
